<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useTokenStore } from '@/stores/token';
import { ElMessage } from 'element-plus';
import { logoutService } from '@/api/login';
import { ref } from 'vue'
import * as echarts from 'echarts';
import {
  Tools,
  Avatar,
  HomeFilled,
} from '@element-plus/icons-vue'

const isHome = ref(true)
const router = useRouter();
//获取子路由集合列表
const list = router.getRoutes().filter(v => v.meta.isShow)
const tokenStore = useTokenStore();
const logout = async () => {
  await logoutService();
  tokenStore.removeToken();
  router.push('/login')
  ElMessage.success("退出成功")
}

const chartDom = ref();
const initBie = async () => {
  let myChart = echarts.init(chartDom.value);
  let option = {
    legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 60, name: '访客总人数' },
        { value: 14, name: '在线总人数' },
        { value: 20, name: '今日访客人数' },
        { value: 13, name: '昨日访客人数' },
        { value: 52, name: '上周访客人数' },
      ]
    }
  ]
  }
  option && myChart.setOption(option);
}
const show = () => {
    setTimeout(() => { initBie() }, 1000)
}
show();
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="4">
            <img src="../../assets/logo.jpg" class="logo" />
          </el-col>
          <el-col :span="16">
            <h2>个人博客管理界面</h2>
          </el-col>
          <el-col :span="4">
            <div class="toolbar">
              <el-icon :size="30" style="margin-right: 8px; margin-top: 1px">
                <Avatar />
              </el-icon>
              <el-dropdown>
                <el-icon :size="20">
                  <Tools />
                </el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="logout">
                      退出登录
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu active-text-color="#ffd04b" 
          background-color="#232323" 
          text-color="#fff" 
          router
          :default-active="$route.path">
                <el-menu-item index="/admin/home" @click="isHome = true;show()">
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    <span>主页</span>
                </el-menu-item>
                <!-- 分隔符 -->
                <el-divider></el-divider>
                <!-- 动态路由展示 -->
                <el-menu-item :index="item.path" @click="isHome = false" 
                v-for="item in list" :key="item.path">
                    <span>{{ item.meta.title }}</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
          <div v-if="isHome">
            <el-card class="page-container">
              <template #header>
                 <div class="header">
                     <span><strong style=" font-size : 30px ">主页面</strong></span>
                 </div>
              </template>
              <div>公告：个人博客，建设中!</div>
              <div style="width: 50%;" >
                  <div ref="chartDom" style="width: 100% ;height: 600px;">
                  </div>
              </div>
            </el-card>
          </div>
          <!-- 动态路由出口 -->
          <div v-else>
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.el-header {
  padding: 0;
  height: 100px;
  background-color: rgb(104, 180, 216);
  .logo {
    margin-left: 0px;
    width: 199px;
    height: 100px;
  }

  h2 {
    text-align: center;
    height: 100px;
    line-height: 100px;
  }

  .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
  }
}

.el-aside{
  .el-menu {
    height: calc(100vh - 80px);
  }
}
</style>


